<template>
	<view class="page-custom-size-popup">
		<u-popup :show="show" :round="16" mode="bottom" @open="onOpen">
			<view class="field-container ">
				<view class="field-title">
					<text class="title-text">{{title}}</text>
					<view class="title-right" @tap="onChangeUnit">
						<text>{{chineseUnit[0]}}</text>
						<image class="change-icon" src="/static/print/change.png" mode=""></image>
						<text class="gray-text">{{chineseUnit[1]}}</text>
					</view>
				</view>

				<view class="field-item">
					<view class="field-item-control">
						<view class="field-item-content flex-between-center">
							<input type="number" v-model="formData.width" class="normal-input" maxlength="4"
								placeholder="宽" />
							<text>x</text>
							<input type="number" v-model="formData.height" class="normal-input" maxlength="4"
								placeholder="高" />
							<text>{{state.sizeUnits[0]}}</text>
						</view>
						<view class="field-item-desc">{{sizeNotices[0]}}</view>
					</view>
				</view>

				<view class="btn-double">
					<view class="custom-button gray-btn full-button" @tap="onCancel">
						<u-button type="primary" shape="circle">
							<u-icon name="/static/other/cancel.svg" size="24"></u-icon>
						</u-button>
					</view>
					<view class="custom-button full-button" @tap="onConfirm">
						<u-button type="primary" shape="circle">
							<u-icon name="/static/other/confirm.svg" size="24"></u-icon>
						</u-button>
					</view>
				</view>
			</view>

		</u-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		defineEmits,
		defineProps,
		computed,
	} from "vue";
	import {
		pxTomm,
		mmTopx,
	} from "@/common/js/method.js";
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '自定义尺寸',
		},
		size: {
			type: Object,
			default: () => ({
				mm: '',
				px: '',
				unit: 'px',
			})
		}
	})
	const formData = reactive({
		width: '',
		height: '',
	});

	const sizeMap = {
		'px': '像素',
		'mm': '毫米',
	};
	const sizeNoticeMap = {
		'px': '*宽、高像素取值范围：100px - 1000px',
		'mm': '*宽、高毫米取值范围：10mm - 80mm',
	};
	const state = reactive({
		sizeUnits: ['px', 'mm'],
	});

	const chineseUnit = computed(() => {
		return state.sizeUnits.map(item => sizeMap[item]);
	});
	const sizeNotices = computed(() => {
		return state.sizeUnits.map(item => sizeNoticeMap[item]);
	})

	const onChangeUnit = () => {
		state.sizeUnits.reverse();
	}


	const emit = defineEmits(['update:show', 'cancel', 'confirm']);

	const onCancel = () => {
		emit('update:show', false);
		emit('cancel')
	}

	const onOpen = () => {
		console.log('onOpen', props.size, props.size.unit)
		if (props.size.unit === 'px') {
			formData.width = props.size.px.split('x')[0];
			formData.height = props.size.px.split('x')[1] || '';
		} else {
			formData.width = props.size.mm.split('x')[0];
			formData.height = props.size.mm.split('x')[1]|| '';
		}
	}

	const getMmSize = () => {
		if (state.sizeUnits[0] === 'px') {
			return [
				pxTomm(formData.width),
				pxTomm(formData.height),
			]
		} else {
			return [
				+formData.width,
				+formData.height,
			]
		}
	};
	const getPxSize = () => {
		if (state.sizeUnits[0] === 'mm') {
			return [
				mmTopx(formData.width),
				mmTopx(formData.height),
			]
		} else {
			return [
				+formData.width,
				+formData.height,
			]
		}
	};

	const validate = () => {
		let {
			width,
			height,
		} = formData;
		// 转为数字
		width = +width;
		height = +height;

		if (state.sizeUnits[0] === 'px') {
			if (width < 100 || width > 1000 || height < 100 || height > 1000) {
				uni.$u.toast('照片宽、高范围：100-1000px')
				return false;
			}
		} else {
			if (width < 10 || width > 80 || height < 10 || height > 80) {
				uni.$u.toast('照片宽、高范围：10-80mm');
				return false;
			}
		}

		// 校验
		return true;
	}




	const onConfirm = () => {
		if (!validate()) return;
		emit('update:show', false);
		emit('confirm', {
			size: {
				mm: getMmSize(),
				px: getPxSize(),
				unit: state.sizeUnits[0]
			},
		})
	}
</script>

<style lang="scss" scoped>
	.page-custom-size-popup {

		.field-container {
			width: 100%;
			box-sizing: border-box;
			height: 546rpx;
			border-radius: 32rpx 32rpx 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.02);
			padding: 28rpx 32rpx 68rpx 32rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			gap: 80rpx;

			.field-title {
				text-align: center;
				font-size: 32rpx;
				line-height: 48rpx;
				color: rgba(0, 0, 0, 1);
				position: relative;

				.title-right {
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					gap: 5px;
					align-items: center;
					font-size: 28rpx;
				}
			}

			.field-item {
				font-size: 28rpx;
				margin-bottom: 56rpx;
				display: flex;
				align-items: center;
			}

			.field-item-title {
				min-width: 144rpx;
				margin-right: 12rpx;
			}

			.field-item-control {
				flex: 1;
				position: relative;
			}

			.field-item-content {
				gap: 14rpx;
			}

			.field-item-desc {
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(166, 166, 166, 1);
				position: absolute;
				top: calc(100% + 12rpx);
				left: 0;
			}

			.normal-input {
				text-align: center;
				// width: 300rpx;
				flex-basis: 300rpx;
				height: 70rpx;
				border-radius: 8rpx;
				background: rgba(245, 245, 245, 1);
			}

			.change-icon {
				width: 28rpx;
				height: 26rpx;
				// margin: 0 8rpx;
			}
		}
	}
</style>